
setTimeout(function(){
       	initHtml();
	       var item_content_li_w=$(".item_content li").width();
		   $(".item").css("width",item_content_li_w+"px");
		   $(".item_content ul li:nth-child(2n)").css("margin","0px");
		   init();
},100)
var data = [{
		id: 1,
		url: 'img/icon_cygn1.png',
		content: '增值税申报1'
	},
	{
		id: 2,
		url: 'img/icon_cygn3.png',
		content: '增值税申报2'
	},
	{
		id: 3,
		url: 'img/icon_cygn3.png',
		content: '增值税申报3'
	},
	{
		id: 4,
		url: 'img/icon_cygn4.png',
		content: '增值税申报4'
	}
];

function initHtml() {
	var html = '';
	html += '<div class="item_content" id="imageChange"><ul>'

	for (var i = 0; i < data.length; i++) {
		html += '<li>';
		html += '<div class="item">';
		html += '<img src="' + data[i].url + '">';
		html += '<span>' + data[i].content + '</span>';
		html += '<span class="rmPicture close"><i class="icon iconfont icon-guanbi1"></i></span>';
		html += '</div></li>';
	}
	html +=
		' <span class="addC"><img src="img/icon_cygn_add.png"><label>点击添加</label></span>'
	html += '<ul></div>';
	$('.item_container').html(html);

};
function init() {
		var item_content_li_w=$(".item_content li").width();
		$(".item").css("width",item_content_li_w+"px");
		$(".item_content ul li:nth-child(2n)").css("margin","0px")
	function Pointer(x, y) {
		this.x = x;
		this.y = y;
	}

	function Position(left, top) {
		this.left = left;
		this.top = top;
	}
	$(".item_container .item").each(function (i) {
		//$(".item_content .item").each(function(i) {
		this.init = function () { // 初始化
				this.box = $(this).parent();
				$(this).attr("index", i).css({
					position: "absolute",
					left: this.box.offset().left,
					top: this.box.offset().top
				}).appendTo(".item_container");
				this.drag();
			},
			this.move = function (callback) { // 移动
				$(this).stop(true).animate({
					left: this.box.offset().left,
					top: this.box.offset().top
				}, 500, function () {
					if (callback) {
						callback.call(this);
					}
				});
			},
			this.collisionCheck = function () {
				var currentItem = this;
				var direction = null;
				$(this).siblings(".item").each(function () {
					if (
						currentItem.pointer.x > this.box.offset().left &&
						currentItem.pointer.y > this.box.offset().top &&
						(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
						(currentItem.pointer.y < this.box.offset().top + this.box.height())
					) {
						// 返回对象和方向
						if (currentItem.box.offset().top < this.box.offset().top) {
							direction = "down";
						} else if (currentItem.box.offset().top > this.box.offset().top) {
							direction = "up";
						} else {
							direction = "normal";
						}
						this.swap(currentItem, direction);
					}
				});
			},
			this.swap = function (currentItem, direction) { // 交换位置
				if (this.moveing) return false;
				var directions = {
					normal: function () {
						var saveBox = this.box;
						this.box = currentItem.box;
						currentItem.box = saveBox;
						this.move();
						$(this).attr("index", this.box.index());
						$(currentItem).attr("index", currentItem.box.index());
					},
					down: function () {
						// 移到上方
						var box = this.box;
						var node = this;
						var startIndex = currentItem.box.index();
						var endIndex = node.box.index();;
						for (var i = endIndex; i > startIndex; i--) {
							var prevNode = $(".item_container .item[index=" + (i - 1) + "]")[0];
							node.box = prevNode.box;
							$(node).attr("index", node.box.index());
							node.move();
							node = prevNode;
						}
						currentItem.box = box;
						$(currentItem).attr("index", box.index());
					},
					up: function () {
						// 移到上方
						var box = this.box;
						var node = this;
						var startIndex = node.box.index();
						var endIndex = currentItem.box.index();;
						for (var i = startIndex; i < endIndex; i++) {
							var nextNode = $(".item_container .item[index=" + (i + 1) + "]")[0];
							node.box = nextNode.box;
							$(node).attr("index", node.box.index());
							node.move();
							node = nextNode;
						}
						currentItem.box = box;
						$(currentItem).attr("index", box.index());
					}
				}
				directions[direction].call(this);
			},
			this.drag = function () { // 拖拽
				var oldPosition = new Position();
				var oldPointer = new Pointer();
				var isDrag = false;
				var currentItem = null;
				$(this).mousedown(function (e) {
					e.preventDefault();
					oldPosition.left = $(this).position().left;
					oldPosition.top = $(this).position().top;
					oldPointer.x = e.clientX;
					oldPointer.y = e.clientY;
					isDrag = true;

					currentItem = this;

				});
				$(document).mousemove(function (e) {
					var currentPointer = new Pointer(e.clientX, e.clientY);
					if (!isDrag) return false;
					$(currentItem).css({
						"opacity": "0.8",
						"z-index": 999
					});
					var left = currentPointer.x - oldPointer.x + oldPosition.left;
					var top = currentPointer.y - oldPointer.y + oldPosition.top;
					$(currentItem).css({
						left: left,
						top: top
					});
					currentItem.pointer = currentPointer;
					// 开始交换位置

					currentItem.collisionCheck();

				});
				$(document).mouseup(function () {
					if (!isDrag) return false;
					isDrag = false;
					currentItem.move(function () {
						$(this).css({
							"opacity": "1",
							"z-index": 0
						});
					});
				});
			}
		this.init();
	});

};

$(document).on("click", ".close", function () {
	var cont = $(this).siblings('span').html();

	for (var i = 0; i < data.length; i++) {
		if (data[i]['content'] == cont) {
			data.splice(i, 1);
		}
	}
	initHtml();
	init();
});
$(document).on("mouseover", ".close i", function () {
	$(this).removeClass("icon-guanbi1").addClass("icon-delete_fill").css("color","#de4336").css("font-size","22px");
	$(this).parent().css("right","10px");
});
$(document).on("mouseleave", ".close i", function () {
	$(this).removeClass("icon-delete_fill").addClass("icon-guanbi1").css("color","#9dafbf").css("font-size","10px");
	$(this).parent().css("right","15px");
});
$(window).resize(function(){
	initHtml();
    init()
})
$(document).on("click", ".addC", function () {
	window.parent.leftSlider.collectShow();
	
	// data.push({
	// 	id: 5,
	// 	url: 'img/icon_cygn_add.png',
	// 	content: '增值税申报5'
	// });
	// initHtml();
	// init();
	// var item_len=$(".wxl_list_con .item").length;
	// if(item_len>7){
	// 	$(".wxl_cygn_des").hide();
	// }else{
	// 	$(".wxl_cygn_des").show();
	// }
})
